@import "normalize";
@import "base";
@import "variable";

// 字体设置
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
}
// 字体大小设置
.font_dpr(@font-size: 16px) {
  font-size: @font-size;

  [data-dpr= "2"] & {
    font-size: @font-size * 2;
  }
  [data-dpr= "3"] & {
    font-size: @font-size * 3;
  }
}
.header {
  .back img {
    margin-top: 30rem/@base;
  }
  .title {
    overflow: hidden;
    height: 96rem/@base;
    line-height: 96rem/@base;
    color: #fff;
    .font_dpr(16px);
    text-align: center;
  }
}
.main {
  .coupon-nav {
    padding-bottom: 5rem/@base;
    width: 100%;
    position: relative;
    .nav-tab {
      overflow: hidden;
      height: 75rem/@base;
      border-right: 3rem/@base solid #ccc;
      border-bottom: 2rem/@base solid #ccc ;
      li {
        float: left;
        width: 33.33%;
        height: 75rem/@base;
        line-height: 75rem/@base;
        text-align: center;
        cursor: default;
        .font_dpr(16px);
        i {
          display: inline-block;
          width: 0;
          height: 0;
          border: 10rem/@base solid transparent;
          border-bottom-color: #ccc;
          margin-left: 10rem/base;
        }
      }
    }
    .search {
      float: right;
      width: 75rem/@base;
      height: 75rem/@base;
      padding: 0;
      margin: 0;
      img {
        width: 50rem/@base;
        height: 50rem/@base;
        margin: 12rem/@base auto 0;
      }
    }
    .nav-options {
      position: absolute;
      left: 0;
      top: 75rem/@base;
      width: 100%;
      display: none;
      z-index: 100;
      background-color: #fff;
    }
    .option-item {
      width: 100%;
      height: 100rem/@base;
      line-height: 100rem/@base;
      border-bottom: 2rem/@base solid #ccc;
      padding-left: 40rem/@base;
      position: relative;
      cursor: default;
      &.current:after {
          content: "";
          width: 100rem/@base;
          height: 100rem/@base;
          background: url(../images/on.png) center center no-repeat;
         position: absolute;
          right: 0;
         top: 0;
        }
    }
  }
  .products {
    padding: 20rem/@base;
    background-color: #f1f1f1;
    li {
      float: left;
      width: 48%;
      margin-bottom: 20rem/@base;
      &:nth-child(odd) {
        margin-right: 4%;
      }
      a {
        display: block;
        height: 400rem/@base;
        padding: 20rem/@base;
        background-color: #fff;
      }
      img {
        height: 260rem/@base;
      }
      .title {
        line-height: 40rem/@base;
        .font_dpr(14px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .price {
        color: #f8601d;
        .font_dpr(16px);
        height: 55rem/@base;
        line-height: 55rem/@base;
      }
      .btn {
        color: #fff;
        width: 125rem/@base;
        height: 55rem/@base;
        line-height: 55rem/@base;
        text-align: center;
        background-color: #ff9501;
        border-radius: 5rem/@base;
      }
    }
  }

}